﻿<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


	<link href="../../../Content/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />

    <script src="../../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../../Scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>        

    <title>
        百度地图
    </title>

</head>




<body>




<!-- data-role = page  用于定义  一个页面.  -->
<div data-role="page">


    <!--  data-role = header  用于定义一个 顶部标题.  -->
    <div data-role="header">
	    <h1> 百度地图 Hello World  </h1>
        <a href="/html5/home.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    </div>  <!-- /header -->





    <!--  data-role = content  用于定义一个 中间内容区域.  -->
    <div data-role="content">


        <input type="button" id="getPos" value="获取我的位置">
		

        <div id="info" class=""></div>


        <img id="result" alt="" src="" />




    </div> <!-- /content -->





    <!--  data-role = footer  用于定义一个 底部标题.  -->
	<div data-role="footer" data-id="foo1" data-position="fixed">
        <h3>
            Footer
        </h3>
	</div><!-- /footer -->

</div><!-- /page -->






<script type="text/javascript">


    $(document).ready(function () {

        $("#getPos").bind("click", function (event, ui) {
            if (navigator.geolocation) {
                $("#info").html("请等待查询结果返回");

                navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, {
                    // 指示浏览器获取高精度的位置，默认为false 
                    enableHighAcuracy: true,
                    // 指定获取地理位置的超时时间，默认不限时，单位为毫秒 
                    timeout: 5000,
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。 
                    maximumAge: 3000
                });

            } else {
                $("#info").html("抱歉，您所使用的浏览器不支持 Geolocation 接口");
            }
        });

        

    });


    function getPositionSuccess(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        $("#info").html( "您所在的位置： 经度" + lat + "，纬度" + lng);

        $("#result").attr("src", "http://api.map.baidu.com/staticimage?width=" + window.screen.availWidth + "&height=300&center=" + lng + "," + lat + "&zoom=18");

    }



    function getPositionError(error) {
        switch (error.code) {
            case error.TIMEOUT:
                alert ("连接超时，请重试");
                break;

            case error.PERMISSION_DENIED:
                alert ( "您拒绝了使用位置共享服务，查询已取消" );
                break;

            case error.POSITION_UNAVAILABLE:
                alert ( "暂时无法为提供位置服务");
                break;
        }
    }


</script>



</body>
</html>
